<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    1、命名路由搭配params,刷新页面参数会丢失
    2、查询参数搭配query,刷新页面数据不会丢失
    3、接手参数使用this.$router后面就是搭配路由的名称就能获取到参数值

    一、vue-router路由跳转分为两大类
    1、编程式的跳转：router.push
    2、声明式的跳转：<router-link>

    编程式的跳转分为三种
    1、this.$router.push("detail"):detail为要跳转的路由地址，该方式简单但无法传递参数。
    2、this.$router.push({name:"detail",
                          params:{personld:33}
                        })
                        detail为要跳转的路由地址，
                        params为传递的参数，
                        目标页面可以使用this.$router.params.personld来获取传递的参数，该方式有一个缺点就是在目标页面刷新时传递过来的参数会丢失
    3、this.$router.push({path:"/detail",
                          query:{personld:33}
                        })
                        detail为要跳转的路由地址，
                        params为传递的参数，
                        目标页面使用this.$router.query.personld来获取传递的参数，该方式会把传递的参数放在url上，
                        如：localhost：8080/#/detail/?personld=33

    
    声明式的跳转分为三种(优缺点与编程式相同)
    1、<router-link to="detail">跳转到详情页</router-link>

    2、<router-link to="{name:'detail',params:{personld:33}}">跳转到详情页</router-link>

    3、<router-link to="{path:'/detail',query:{personld:33}}">跳转到详情页</router-link>

</body>
</html>